<template lang="pug">
el-dialog(
  
  top="3vh"
  custom-class="cover-modal"
  :visible.sync="show"
  width="1195px"
  @open="beforeOpen"
  :before-close="close"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 选择封面图
  .modal-content(
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  )
    .cover-menus
      .menu-item(
        v-for="item in cateList"
        :key="item.sourceMaterialSpaceId"
        :class="activeSpace === item.sourceMaterialSpaceId ? 'active' : ''"
        @click="changeSpace(item)"
      ) {{item.spaceName}}（{{item.count}}）
    .cover-list
      .cover-list-header
        .list-header-info 图片大小不超过10MB
        //- el-upload(
        //-   action="#"
        //-   :multiple="false"
        //-   accept="image/*"
        //-   ref="styleUpload"
        //-   :show-file-list="false"
        //-   :auto-upload="false"
        //-   list-type="picture"
        //-   :on-change="uploadImage"
        //- )
        ali-upload(@getFileInfo="getFileInfo" multiple accept="image/*")
          el-button(size="small" type="primary") 上传
      .cover-list-container(v-if="materialList.length")
        .cover-list-body
          .cover-item(v-for="item in materialList")
            .cover-item-bd(
              :style="`background-image: url(${item.fileUrl})`"
              @click="selectMaterial(item)"
              :class="currentItem.sourceMaterialId === item.sourceMaterialId ? 'active' : ''"
            )
      .cover-list-empty(v-else)
        img(src="../../../static/images/empty_.png")
        .cover-list-empty-txt ~~暂无素材封面图
      .cover-list-pagination
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          @current-change="currentChange"
        )
  .modal-footer(slot="footer")
    el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { FileUpload, getSourceMaterialSpaceList, getSourceMaterialList, postAddSourceMaterialPicture } from 'api'
import aliUpload from '@/components/customUpload'
let loading = null
export default {
  name: 'selectCoverModal',
  props: {
    show: Boolean
  },
  data () {
    return {
      loadingText: '加载中...',
      loading: true,
      cateList: [],
      activeSpace: '',
      currentPage: 1,
      pageSize: 15,
      total: 0,
      materialList: [],
      currentItem: {}
    }
  },
  components: {
    aliUpload
  },
  methods: {
    beforeOpen () {
      this.currentItem = {}
      this.getSpaceList()
    },
    close () {
      this.currentPage = 1
      this.$emit('close')
    },
    confirm () {
      if (this.currentItem && this.currentItem.sourceMaterialId) {
        this.$emit('change', this.currentItem)
      } else {
        this.$message.error('请先选择图文封面图！')
      }
    },
    async fileUpload (raw) {
      return new Promise(async (resolve, reject) => {
        try {
          let formData = new FormData()
          formData.append('Filedata', raw)
          formData.append("applicationId", 4)
          const { ResultSet } = await this.$axios.post(FileUpload, { formData: formData, isUpload: true }, { headers:{ "Content-Type": "multipart/form-data" } })
          resolve({ ...ResultSet.Result[0] })
        } catch (err) {
          console.log(err)
          reject(err)
        }
      })
    },
    async uploadImage (file) {
      try {
        this.loading = true
        this.loadingText = '上传中...'
        const fileItem = await this.fileUpload(file.raw)
        await this.$axios.post(postAddSourceMaterialPicture, { spaceId: this.activeSpace, fileId: fileItem.fileId, name: '未命名图片' })
        this.loading = false
        this.currentPage = 1
        await this.getMaterialList()
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getFileInfo (data) {
      try {
        this.loading = true
        this.loadingText = '上传中...'
        let fileList = data.map(item => {
          return {
            fileId: item.fileId,
            name: '未命名图片'
          }
        })
        await this.$axios.post(postAddSourceMaterialPicture, { spaceId: this.activeSpace, pictureList: fileList })
        this.loading = false
        this.currentPage = 1
        await this.getMaterialList()
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    selectMaterial (item) {
      this.currentItem = item
    },
    changeSpace (item) {
      this.activeSpace = item.sourceMaterialSpaceId
      this.currentPage = 1
      this.getMaterialList()
    },
    currentChange (page) {
      this.currentPage = page
      this.getMaterialList()
    },
    async getSpaceList () {
      try {
        const { ResultSet } = await this.$axios.post(getSourceMaterialSpaceList)
        if (ResultSet.userData.data.length) this.activeSpace = ResultSet.userData.data[0].sourceMaterialSpaceId
        this.cateList = ResultSet.userData.data
        this.getMaterialList()
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getMaterialList () {
      try {
        this.loading = true
        this.loadingText = '加载中...'
        let query = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          type: 1
        }
        if (this.activeSpace) query.spaceId = this.activeSpace
        const { ResultSet } = await this.$axios.post(getSourceMaterialList, { ...query })
        this.materialList = ResultSet.userData.data
        this.total = ResultSet.userData.total
        this.loading = false
      } catch (err) {
        this.loading = false
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  }
}
</script>

<style lang="scss">
.cover-modal {
  margin-bottom: 0;
  .el-dialog__header {
    background: #EDEDED;
    padding-bottom: 20px;
  }
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__footer {
    padding-bottom: 10px;
    border-top: 1px solid #DCDFE6;
  }
}
</style>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
}
.modal-content {
  display: flex;
  height: 750px;
}
.cover-menus {
  height: 100%;
  width: 150px;
  overflow-y: overlay;
  padding-right: 20px;
  border-right: 1px solid #DCDFE6;
}
.menu-item {
  padding: 17px 10px;
  font-size: 14px;
  line-height: 16px;
  color: #353535;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  &.active {
    color: #ED5B75;
  }
}
.menus-empty {
  padding: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.cover-list {
  flex: 1;
}
.cover-list-header {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.list-header-info {
  margin-right: 10px;
  font-size: 14px;
  color: #999;
}
.cover-list-container {
  height: calc(100% - 134px);
}
.cover-list-body {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
.cover-item {
  padding: 0 10px;
  margin-bottom: 20px;
  .cover-item-bd {
    width: 185px;
    height: 185px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid transparent;
    &.active {
      border-color: #FF2E42;
    }
  }
}
.cover-list-empty {
  height: calc(100% - 134px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.cover-list-empty-txt {
  font-size: 14px;
  color: #999;
  margin-top: 15px;
}
.cover-list-pagination {
  text-align: right;
  padding: 20px;
}
.modal-footer {
  text-align: center;
}
</style>